<template>
    <div class="classifybox" :class='list.data!=="address"?"nolast":""'>
        <div class="left">{{ list.data }}</div>
        <div class="right">
            <div :class="more?'right_left_true':'right_left'" ref="allkey">
                <div class="classifykey light" @click="keyfir">不限</div>
                <div v-for="(item,index) in list.list" :key="item.id" class="classifykey" @click="keyclick(index,item.children,item.id)" :name="list.name">{{ item.name }}</div>
            </div>
            <div class="box_right" @click="more=!more">
                <span style="font-size: 14px;color: #3473e6;">更多</span>
                <span class="iconfont  size" :class="more?'icon-shang':'icon-xia'"></span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:['list'],
    data(){
        return{
            index: 0,
            more: false,
            seclist:[]
        }
    },

    methods:{
        keyclick(index,data,id){
            let allkey = this.$refs.allkey.children
            if(this.list.name === 'fwlx'){
                this.$emit('setitem',data)
            }
            if(this.index === index+1){
                console.log('true')
                return
            }else{
                allkey[index+1].classList.toggle('light')
                allkey[this.index].classList.toggle('light')
                this.index = index+1
            }
            this.$emit('setid',{id,name:this.list.name})
        },

        keyfir(){
            let allkey = this.$refs.allkey.children
            if(this.list.name === 'fwlx'){
                this.$emit('setitem',false)
            }
            if(this.index === 0){
                return
            }else{
                allkey[this.index].classList.toggle('light')
                allkey[0].classList.toggle('light')
            }
            this.index = 0
            this.$emit('setid',{id:'',name:this.list.name})
        }
    },

    updated(){
        let allkey = this.$refs.allkey.children
        for(let i=0;i<allkey.length;i++){
            allkey[i].classList.remove('light')
        }
        allkey[0].classList.add('light')
        this.index=0
    }
}
</script>

<style scoped>
.nolast{
    border-bottom: #e0e1e2 1px dashed;
}
.right_left_true{
    display: flex;
    flex-wrap: wrap;
    width: 856px;
    margin-right: 74px;
}
.light{
    background-color: #3473e6;
    color: #fff;
}
.classifybox{
    display: flex;
    padding-bottom: 10px;
}
.left{
    width: 120px;
    line-height: 30px;
    padding-left: 10px;
    margin-top: 10px;
    color: #909399;
    font-size: 14px;
}
.right{
    display: flex;
    justify-content: space-between;
}
.right_left{
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    height: 40px;
    width: 856px;
    margin-right: 74px;
}
.box_right{
    display: flex;
    width: 48px;
    margin-top: 10px;
    align-items: center;
}
.size{
    font-weight: 700;
    font-size: 14px;
    color: #2658b6;
}
.classifykey:hover{
    background-color: #3473e6;
    color: #fff;
}
.classifykey{
    cursor: pointer;
    line-height: 20px;
    padding: 5px 10px;
    margin-right: 10px;
    margin-top: 10px;
    border-radius: 2px;
    font-size: 14px;
}
</style>